<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
	<title>商品列表</title>
	<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
	<link rel="stylesheet" type="text/css" href="/static/plugins/webuploader/webuploader.css"/>
	<link rel="stylesheet" type="text/css" href="https://g.alicdn.com/de/prismplayer/2.8.7/skins/default/aliplayer-min.css" />
	<link rel="stylesheet" type="text/css" href="/static/common/common.css" />	
	<style type="text/css">
		.layui-table-body.layui-table-main tr .layui-table-cell{
			height: 116px;
   		    line-height: unset;
		}
		.image-list .item{	
		    height: 116px;		
		    margin: 0px;
		}
		.image-list .item .image-card{
			height: 62px;
		}
		.image-list .item img{
		    max-height: 60px;		
    		max-width: 108px;
		}
		.webuploader-pick{
		    height: 98px!important;
		    background: #f8f8f8 url(./../static/images/upload.png) center 18px no-repeat!important;
		}
		.image-list .layui-icon-delete{	
			position: relative;
    		bottom: -2px;	
		}
		.image-container{
			margin-left: 0px;
		}
		.image-list .layui-icon-delete {
		    font-size: 22px;
		}	
	</style>
</head>
<body class="body-container">
	<input id="fileServiceLocation" type="hidden" th:value="${file_service_location}" />
	<div class="layui-tab layui-tab-brief" lay-filter="productStatusTabFilter">
	  <ul class="layui-tab-title">	
	    <li status="1" class="layui-this">上架中</li>	
	  	<li status="">全部</li>	
	    <li status="2">下架中</li>
	    <li status="3">系统下架</li>
      	<li status="4">草稿箱</li>
	    <li status="5">已删除</li>
	  </ul>
	  <div class="layui-tab-content"></div>
	</div> 
	
	<form class="layui-form search-query-from" action="">
	  <div class="layui-form-item">
	  	<div class="layui-inline">
		    <a lay-href="/productInfo/showAddInfo">
	        	<button type="button" class="layui-btn layui-btn-normal layui-btn-sm">添加商品</button>
	        </a>
	    </div>	
	  	
	  	<!-- 品牌查询  -->	
	    <div class="layui-inline">
	      <div class="layui-input-inline" style="width: 150px">
	          <select id="brandIdSelectQuery" name="brandId" lay-verify="required" lay-filter="brandIdSelectQuery" lay-search="">
		      </select>
	      </div>
	    </div>
	    
	    <!-- 车型查询 -->
	    <div class="layui-inline">
	      <div class="layui-input-inline" style="width: 150px">
	          <select id="categoryIdSelectQuery" name="categoryId" lay-verify="required" lay-filter="categoryIdSelectQuery" lay-search="">
	          <option value="">选择或搜索车型</option>
		      </select>
	      </div>
	    </div>
	    
	    <!-- 交易类型  -->
	    <div class="layui-inline">
	      <div class="layui-input-inline" style="width: 110px">
	          <select id="dealTypeSelect" name="dealType" lay-verify="required" lay-filter="dealTypeSelect" lay-search="">
		      <option value="">交易类型</option>
		      <option value="1">出售</option>
		      <option value="2">收购</option>
		      </select>
	      </div>
	    </div>
	    
	    <!-- 标签查询  -->
	    <div class="layui-inline">	
	      <div class="layui-input-inline" style="width: 110px">
	          <select id="tagQuerySelect" name="tagQuery" lay-verify="required" lay-filter="tagQuerySelect" lay-search="">
		      <option value="">标签类型</option>
		      <option value="1">新品</option>
		      <option value="2">热卖</option>
		      </select>
	      </div>
	    </div>
	    
	    <!-- 统计查询  -->
	    <div class="layui-inline">
	      <div class="layui-input-inline" style="width: 110px">
	          <select id="countQuerySelect" name="countQuery" lay-verify="required" lay-filter="countQuerySelect" lay-search="">
		      <option value="">统计类型</option>
		      <option value="1">浏览次数</option>
		      <option value="2">收藏次数</option>
		      <option value="3">超赞次数</option>
		      <option value="4">想要次数</option>
		      </select>
	      </div>
	    </div>
	    
	    <!-- 产品名称  -->
	    <div class="layui-inline">
	      <div class="layui-input-inline">
	         <input type="text" name="productName"  placeholder="请输入产品名称" autocomplete="off" class="layui-input">
	      </div>
	    </div>
	    
	    <!-- 产品编号  -->
	    <div class="layui-inline">
	      <div class="layui-input-inline">
	         <input type="text" name="productNumber"  placeholder="请输入产品编号" autocomplete="off" class="layui-input">
	      </div>
	    </div>
	    
	    <div class="layui-inline">
	      <div class="layui-input-inline">
	         <input type="text" name="mainUserName"  placeholder="请输入卖家名称" autocomplete="off" class="layui-input">
	      </div>
	    </div>
	    
	    <div class="layui-inline">
        	<button id="searchQueryBtnId" type="button" class="layui-btn layui-btn-normal layui-btn-sm">查询</button>
	    </div>
	    
	  </div>
	</form>
	 
	<!-- table表格数据 -->
	<div class="content-container">
		<table class="layui-hide" id="layerTable" lay-filter="layerTable"></table>
	</div>
	
	<div class="prism-player" id="player-con"></div>

	<script src="/static/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script src="/static/layui/layui.all.js" type="text/javascript"></script>
    <script src="/static/admin/index.js" type="text/javascript"></script> 
    <script type="text/javascript" src="/static/plugins/webuploader/webuploader.js"></script>
    <script type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.8.7/aliplayer-min.js"></script>
	<script src="/static/common/common.js" type="text/javascript"></script>
	<script type="text/javascript" th:inline="none">
		var brandIdVal;
		var productNameVal = "";
		var productNameVal = "";
		var productStatusVal = "1";	
		var fileServiceLocationVal = "";
		var dealTypeVal;
		var tagQueryVal;
		var countQueryVal;
		var categoryIdVal;
		
		$(document).ready(function() {		
			fileServiceLocationVal = $("#fileServiceLocation").val();
			selectBrandList();
			selectSearchQueryBtnId();	
		})
		
		// 搜索查询
		function selectSearchQueryBtnId(){
			productNameVal = $(".search-query-from input[name='productName']").val();
			productNumberVal = $(".search-query-from input[name='productNumber']").val();
			mainUserNameVal = $(".search-query-from input[name='mainUserName']").val();
			layui.table.reload('layerTable',{url:table_url,page:{curr:1},where:{
				'brandId':brandIdVal,
				'productName':productNameVal,
				'productNumber':productNumberVal,
				'mainUserName':mainUserNameVal,
				'productStatus':productStatusVal,
				'dealType':dealTypeVal,
				'tagQuery':tagQueryVal,
				'countQuery':countQueryVal,
				'categoryId':categoryIdVal
			}});
		}
			
		layui.use('element', function(){
		  var element = layui.element;
		  element.on('tab(productStatusTabFilter)', function (elem) {
			  productStatusVal = $(this).attr('status');
			  selectSearchQueryBtnId();
			});		
		});
			
		$(document).on('click', '#searchQueryBtnId', function () {
			selectSearchQueryBtnId();	
		})
		
		// table
		var table_url = '/productInfo/selectPageList';
		layui.use('table', function(){
	        var table = layui.table;
	        table.render({
	            elem: '#layerTable'	
	            //,url:'/productInfo/selectPageList'
				//,height:600
				,method:'post'
				,limit:10
				,limits:[10,20,30]
				,where: {}
	            ,request: {
	                pageName: 'currentPage' //页码的参数名称，默认：page
	                ,limitName: 'pageSize' 	//每页数据量的参数名，默认：limit
	            }
	            ,response: {		
	                statusName: 'code' 		//数据状态的字段名称，默认：code
	                ,statusCode: 200 		//成功的状态码，默认：0
	                ,msgName: 'msg' 		//状态信息的字段名称，默认：msg
	                ,countName: 'total'  	//数据总数的字段名称，默认：count
	                ,dataName: 'dataObject' //数据列表的字段名称，默认：data
				}	
	            ,cols: [[			
	            	 {type:'numbers'}		
	            	,{field:'productName',width:300, title: '商品信息',templet: 
	            		function(res){	
	            			var html = "";
	            			html+='<p style="font-size: 17px;margin-top: 2px;">编号： '+res.productNumber+'</p>';
	            			html+='<p style="font-size: 17px;margin-top: 2px;">名称： '+res.productName+'</p>';
	            			html+='<p style="font-size: 18px;margin-top: 2px;">品牌： '+res.brandName+'</p>';
	            			html+='<p style="font-size: 18px;margin-top: 2px;">型号： '+res.categoryName+'</p>';
	            			html+='<p style="font-size: 18px;margin-top: 2px;">卖家： '+res.mainUserName;
	            			//html += '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs look-main-user-info-btn">'+res.mainUserName+'</button>';
	            			html+='</p>';
	           				return html;	
	            		}
	            	}
	            	,{field:'mainFileUrl',width:190, title: '产品主文件',templet: 
	            		function(res){	
	            			var html = '';
	            			html+='<div class="image-container">';
	            			html+='<ul class="image-list">';
	            			html+='<li class="item">';
	            			html+='<div class="img-title mian">120 * 100</div>';
	            			
	            			html+='<div class="image-card image-sort'+res.id+'">';
	            			if(res.mainFileUrl){		            				
	        					if(res.contentType=="video/mp4"){	
	        						html+='<video style="width: 100%;  height: 100%;" src="'+fileServiceLocationVal+res.mainFileUrl+'" controls="controls">您的浏览器不支持 video 标签。</video>';
	        					}else{
	        						html+='<img class="picture-preview-btn" alt="url" src="'+fileServiceLocationVal+res.mainFileUrl+'">';
	        					}	
	            			}else{
	            				html+='<div id="fileList" class="uploader-list"></div>';	
	        					html+='<div class="wb-file-pickers" image-sort="1" product-id='+res.id+' onchange="webUploadsOnchange(\''+res.id+'\')"></div>';	
	            			}
	            			html+='</div>';		
	            			
	            			html+='<div class="image-tools image-sort1">';
	        				if(res.mainFileUrl){		            					
	            				html+='<i class="layui-icon layui-icon-delete del-product-image" file-number="'+res.mainFileUrl+'" image-sort="'+res.id+'"></i>';
	        				}
	        				html+='</div>';
	            			html+='</li>';
							// 更多	            			
	            			html+='<li class="" style="margin-top: 2px; float: left; margin-left: 5px;">';
	            			html += '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs look-main-user-info-btn" style="bottom: 0px; position: absolute;">更多</button>';
	            			html+='</li>';
	            			
	            			html+='</ul>';
	            			html+='</div>';
	            			return html;
	            		}
	            	}
	            	,{field:'sellingPrice',width:140, title: '价格',templet: 
	            		function(res){	
	            			var html = "";
	            			// 交易类型
	            			if(res.dealType==1){	
	            				html = '<p>交易类型：<span style="color: #5fb878;">出售</span></p>';	
	            			}else if(res.dealType==2){
	            				html = '<p>交易类型：<span style="color: red;">求购</span></p>';
	            			}else{
	            				html = '<p>交易类型：-</p>';
	            			}		
	            			
	            			html+='<p>原价： ￥<span style="text-decoration: line-through;">'+res.originalPrice+'</span> 元</p>';
	            			html+='<p >售价： ￥'+res.currentPrice+' 元</p>';
	            			return html;	
	            		}
	            	}
	            	,{field:'productSkuCount',width:100, title: '总库存',templet: 
	            		function(res){	
	            			var html = "";
	            			html+='<p>'+res.productCount+" "+res.productUnit+'</p>';
	            			html += '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs edit-product-sku-btn" style="margin-top: 10px;">sku库存</button>';
	            			return html;	
	            		}
	            	
	            	}	
	            	,{field:'isNew',width:150, title: '标签',templet: 
	            		function(res){		
	            			var html = "";
	            			html+='<form class="layui-form" action="">';
	            			html+='<div class="layui-form-item" style="margin-bottom: 2px;">';		
	            			html+='<label class="layui-form-label" style="width: 50px; padding-left: 0px;">新品</label>';
	            			html+='<div class="layui-input-block" style="margin-left: 50px;line-height: 39px;">';
	            			if(res.isNew==1){	            				
	            				html+='<input type="checkbox" checked="" lay-skin="switch" lay-filter="switchIsNew" lay-text="开启|取消" value='+res.id+'>';
	            			}else{
	            				html+='<input type="checkbox" lay-skin="switch" lay-filter="switchIsNew" lay-text="开启|取消" value='+res.id+'>';	
	            			}	
	            			html+='</div>';
	            			html+='</div>';
	            			html+='<div class="layui-form-item" style="margin-bottom: 2px;">';
	            			html+='<label class="layui-form-label" style="width: 50px; padding-left: 0px;">热卖</label>';
	            			html+='<div class="layui-input-block" style="margin-left: 50px;line-height: 39px;">';
	            			if(res.isHot==1){	            				
	            				html+='<input type="checkbox" checked=""  lay-skin="switch" lay-filter="switchIsHot" lay-text="开启|取消" value='+res.id+'>';
	            			}else{
	            				html+='<input type="checkbox" lay-skin="switch" lay-filter="switchIsHot" lay-text="开启|取消" value='+res.id+'>';	
	            			}
	            			html+='</div>';
	            			html+='</div>';
	            			
	            			html+='</form>';

	           				return html;	
	            		}
	            	}
	            	,{field:'viewCount',width:120, title: '统计/次',templet: 
	            		function(res){	
	            			var html = "";
	            			html+='<p>浏览： '+res.viewCount+' </p>';
	            			html+='<p>收藏： '+res.collectCount+' </p>';
	            			html+='<p>超赞： '+res.praiseCount+' </p>';
	            			html+='<p>想要： '+res.wantCount+' </p>';
	           				return html;	
	            		}
	            	}
	            	,{field:'productStatus',width:100, title: '商品状态',templet: 
	                	function(res){		
	            			var html = "";
	            			html += getCommonProductStatus(res.productStatus);
	            			html += '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs edit-product-status-btn" product-id='+res.id
	            			+' product-status='+res.productStatus+' style="margin-top: 10px;height: 17px;line-height: 17px;"><i class="layui-icon layui-icon-edit"></i></button>';
	               			return html;		
	                	}
	                }
	                ,{field:'createTime',width:220, title: '时间', templet:
	                	function(res){
	            			var html = "";
	            			html+='<p>创建： '+commonDateFormat(res.createTime,"yyyy-MM-dd hh:mm:ss")+' </p>';
	            			html+='<p>修改： '+commonDateFormat(res.updateTime,"yyyy-MM-dd hh:mm:ss")+' </p>';
	           				return html;	
	            		}
	                }
	                ,{field:'right',title: '操作', templet: 
	                	function(res){		
	                		var html = "";
	                		html += '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs edit-product-info-btn">编辑</button>';
	                		html += '<button type="button" class="layui-btn layui-btn-normal layui-btn-xs product-preview-btn">预览</button>';
	                		// html += '<button type="button" class="layui-btn layui-btn-normal layui-btn-sm product-print-btn">打印商品</button>';
	               			return html;	
	                	}
	                }	
	            ]]	
	            ,page: true
	            ,done: function(res, curr, count){	
	            	initWebUploader();
	            }
	        });  
    	});
		
		layui.use('form', function () {
			var form = layui.form;	
			// 品牌查询  brandIdSelectQuery
			form.on('select(brandIdSelectQuery)', function (data) {
				brandIdVal = data.value;
				selectSearchQueryBtnId();
				// 查询车型列表  根据品牌id	
				selectCategoryList(brandIdVal);
		    });	
			// 根据车型查询	
			form.on('select(categoryIdSelectQuery)', function (data) {
				categoryIdVal = data.value;
				selectSearchQueryBtnId();
			});
			// 交易类型
			form.on('select(dealTypeSelect)', function (data) {
				dealTypeVal = data.value;
				selectSearchQueryBtnId();
		    });	
			// 标签类型
			form.on('select(tagQuerySelect)', function (data) {
				tagQueryVal = data.value;
				selectSearchQueryBtnId();
		    });	
			// 统计类型
			form.on('select(countQuerySelect)', function (data) {
				countQueryVal = data.value;
				selectSearchQueryBtnId();
		    });	
			
			form.on('switch(switchIsNew)', function (data) {
				var contentStr = "开启新品吗?";
				var productInfoId = data.value;
				// 取消新品
				var x=data.elem.checked;
				if(x==false){
					contentStr = "取消新品吗?";
				}
	            layer.open({
	                content: contentStr
	                ,btn: ['确定', '取消']
	                ,yes: function(index, layero){
	                    data.elem.checked=x;
	                    $.ajax({
	    					url: '/productInfo/updateIsNew',  		// 请求的url地址	
	    					dataType: 'json', 					// 返回格式为json	
	    					data: {'productInfoId':productInfoId,'switchs':x},
	    					type: 'post', 						// 请求方式		
	    					async: false,	
	    					success: function (res) {
	    						if (res.code == 200) {	
	    							layer.msg("操作成功");	
	    							form.render();
	    		                    layer.close(index);
	    		                    //按钮【按钮一】的回调
	    						} else {
	    							layer.msg(res.msg);
	    							data.elem.checked=!x;
    			                    form.render();	
    			                    return false //开启该代码可禁止点击该按钮关闭
	    						}
	    					},
	    					error: function () {

	    					}
	    				});
	                }
	                ,btn2: function(index, layero){
	                    //按钮【按钮二】的回调
	                    data.elem.checked=!x;
	                    form.render();
	                    layer.close(index);
	                    return false //开启该代码可禁止点击该按钮关闭
	                }
	                ,cancel: function(){
	                    //右上角关闭回调
	                    data.elem.checked=!x;
	                    form.render();
	                    return false //开启该代码可禁止点击该按钮关闭
	                }
	            });
		    });
		    
			form.on('switch(switchIsHot)', function (data) {
				var contentStr = "开启热卖吗?";
				var productInfoId = data.value;
				// 取消新品
				var x=data.elem.checked;
				if(x==false){
					contentStr = "取消热卖吗?";
				}
	            layer.open({
	                content: contentStr
	                ,btn: ['确定', '取消']
	                ,yes: function(index, layero){
	                    data.elem.checked=x;
	                    $.ajax({
	    					url: '/productInfo/updateIsHot',  		// 请求的url地址	
	    					dataType: 'json', 					// 返回格式为json	
	    					data: {'productInfoId':productInfoId,'switchs':x},
	    					type: 'post', 						// 请求方式		
	    					async: false,	
	    					success: function (res) {
	    						if (res.code == 200) {	
	    							layer.msg("操作成功");	
	    							form.render();
	    		                    layer.close(index);
	    		                    //按钮【按钮一】的回调
	    						} else {
	    							layer.msg(res.msg);
	    							data.elem.checked=!x;
    			                    form.render();	
    			                    return false //开启该代码可禁止点击该按钮关闭
	    						}
	    					},
	    					error: function () {

	    					}
	    				});
	                }
	                ,btn2: function(index, layero){
	                    //按钮【按钮二】的回调
	                    data.elem.checked=!x;
	                    form.render();
	                    layer.close(index);
	                    return false //开启该代码可禁止点击该按钮关闭
	                }
	                ,cancel: function(){
	                    //右上角关闭回调
	                    data.elem.checked=!x;
	                    form.render();
	                    return false //开启该代码可禁止点击该按钮关闭
	                }
	            });
			});
		})
		
		// 编辑产品
		$(document).on('click', '.edit-product-info-btn', function () {
			  layer.msg("编辑产品");	
			
			
		})
		
		// 修改产品sku信息
		$(document).on('click', '.edit-product-sku-btn', function () {
			  layer.msg("修改产品sku信息");	
			
			
		})
			
		$(document).on('click', '.product-preview-btn', function () {
			  layer.msg("预览 待开发中");	
			
			
		})
		
		// 获得品牌列表
		function selectBrandList(){
			$.ajax({					
		        type: 'post',						
		        url: '/brandInfo/selectList',			
		      	data:{},														
		        dataType: 'json',	
		        success: function(res) {
		    		var html = "";
		        	if(res.code==200){											
		    			brand_list_cache = res.dataObject;
		    			html+='<option value="">选择或搜索品牌</option>';
						for (let index = 0; index < res.dataObject.length; index++) {
							const element = res.dataObject[index];
							html+='<option value="'+element.id+'">'+element.brandName+'</option>';
						}		
		    		}else{	
		    			layer.msg(res.msg);	
		    		}
		    		$("#brandIdSelectQuery").empty().append(html);	
		    		layui.form.render(); 	
			    },							
			    error: function(data){					
			    	
			    }	
		    });			
		}
		
		// 编辑产品状态 edit-product-status-btn
		$(document).on('click', '.edit-product-status-btn', function () {
			var productId = $(this).attr("product-id")
			var pStatus = $(this).attr("product-status")
			var html = "";		
			html+='<div style="margin: 40px 20px;">';	
			html+='<form class="layui-form" action="">';
			
			html+='<div class="layui-form-item">';
			html+='<div class="layui-inline">';
			html+='<label class="layui-form-label zdy-required">产品状态</label>';
			//  1、上架中   2、下架中  3、系统下架  4、草稿箱  5、已删除
			html+='<div class="layui-input-inline">';
			html+='<select id="productStatus" name="productStatus" lay-verify="required" lay-filter="productStatusSelect" lay-search="">';
			html+='<option value="1" '+("1"==pStatus?"selected":"")+'>上架中</option>';	
			html+='<option value="2" '+("2"==pStatus?"selected":"")+'>下架中</option>';	
			html+='<option value="3" '+("3"==pStatus?"selected":"")+'>系统下架</option>';	
			html+='<option value="4" '+("4"==pStatus?"selected":"")+'>草稿箱 </option>';	
			html+='<option value="5" '+("5"==pStatus?"selected":"")+'>已删除 </option>';	
	 		html+='</select>';					
	 		html+='</div>';
	 		html+='</div>';
	 		html+='</div>';
			
			html+='</form>';
			html+='</div>';
			
			var index = layer.open({				
				type: 1 ,				  		// 0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层
				title: "修改状态",					// title: ['文本', 'font-size:18px;']，数组第二项可以写任意css样式；如果你不想显示标题栏，你可以title: false
				area: ['470px', '380px'],		// 默认：'auto' 	自适应
				//shade: 1,				  		// 要想显示遮罩需要将这个  注释							
				skin: 'layui-layer-lan',  		// layer内置的skin有：layui-layer-lan layui-layer-molv
				maxmin: true,
				resize:false,		
				shadeClose:false,					
				content:html,					
				btn: ['立即保存','取消'], 	
				btn1: function(){			

				},
				btn2: function(){				
					layer.close(index);		
				},
				cancel: function(){ 

				},		
				success: function(layers){		
					var form = layui.form;
					layers.addClass('layui-form');	
					layers.find('.layui-layer-btn0').attr('lay-filter', 'updateStatusFrom').attr('lay-submit', '');//将按钮弄成能提交的
					form.render(); 			
					form.on('submit(updateStatusFrom)', function (data) {
						data.field.productInfoId = productId;
						$.ajax({				
							url: '/productInfo/updateStatus', 				// 请求的url地址	
							dataType: 'json', 						// 返回格式为json	
							data: data.field,
							type: 'post', 							// 请求方式		
							async: false,	
							success: function (res) {
								if (res.code == 200) {
									layer.msg("修改成功");	
									layer.close(index);	
									layui.table.reload('layerTable',{url:table_url,page:{curr:1},where:{}});	
								}else{			
									layer.msg(res.msg);	
								}
							},		
							error: function () {

							}
						});	
						return false;
					});	

				}	
			});
			
		})
		
		// 打印
		$(document).on('click', '.product-print-btn', function() {
			
			var printHtml = "";	
			printHtml+='<!DOCTYPE html>';
			printHtml+='<html lang="en">';
			printHtml+='<head>';
			printHtml+='<meta charset="UTF-8">';
			printHtml+='<meta name="viewport" content="width=device-width, initial-scale=1.0">';
			printHtml+='<meta http-equiv="X-UA-Compatible" content="ie=edge">';
			printHtml+='<title>打印</title>';
			printHtml+='</head>';
			printHtml+='<body>';
			printHtml+='<div class="print-pictures" >';							
			printHtml+='<img style="display: inline-block;" alt="" src="https://oapi.aisegment.com/static/photo/20190605/result/b5f/b5f96884cbbf40c381052a84c703f17b.jpg">';
			printHtml+='</div>';
			printHtml+='</body>';
			printHtml+='</html>';

			var wind = window.open("",'newwindow', 'toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');

			wind.document.body.innerHTML = printHtml;

			wind.print();
			//return false; 
			//var wind = window.open("https://oapi.aisegment.com/static/photo/20190605/result/b5f/b5f96884cbbf40c381052a84c703f17b.jpg",'newwindow', 'height=300, width=700, top=100, left=100, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no');
			//wind.print();
		})
		
		var productIdVal;
		// 自定义属性值 
		function webUploadsOnchange(id) {   	         
			productIdVal = id;      
		}
		// 初始化 图片文件上传 webUploaderObj
	    var webUploaderObj = null;
	    function initWebUploader() {		
	    		// 初始化Web Uploader	 	  
		        webUploaderObj = WebUploader.create({
		        auto: true,							// 选完文件后，是否自动上传。
		        // swf文件路径
		        swf: './../static/plugins/webuploader/Uploader.swf',
		        // 文件接收服务端。
		        server: '/upload/productMainFileUrl',
		        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		        pick: '.wb-file-pickers',    
		        // 只允许选择图片文件。
		        accept: {
		            title: 'Images',	
		            extensions: 'gif,jpg,jpeg,bmp,png,mp4',
		            mimeTypes: 'image/*,video/*'
		        },  			
		        fileVal:"file", 						// [默认值：'file'] 设置文件上传域的name。  
		        fileNumLimit: 1, 						//限制上传个数
		        //fileSingleSizeLimit: 2048000, 		//限制单个上传图片的大小
		        compress: false, 						//webuploader默认压缩图片,设置compress:false，可以按照原始比例上传图
				chunked: false, 						//是否要分片处理大文件上传  
				duplicate: false, 						//是否支持重复上传 	 
				fileSizeLimit: 20 * 1024 * 1024 		// 2000 * 1024 * 1024 最大2GB   
				//chunkSize:2*1024*1024, 				//分片上传，每片2M，默认是5M
		    });
		 	// 验证文件格式以及文件大小 
			webUploaderObj.on("error", function (type,file) {
				if (type == "Q_TYPE_DENIED") {
					layer.msg("文件格式不支持");
				} else if (type == "Q_EXCEED_SIZE_LIMIT") {
					layer.msg("文件大小不能超过20M");
				}else if(type == "Q_EXCEED_NUM_LIMIT"){
					layer.msg("超过每次上传数量图片限制");
				}else if(type == "F_DUPLICATE"){
					layer.msg("文件重复");  
				} else {         
					layer.msg("上传出错！错误代码"+type);
				} 
			});     
			// 上传前验证   
			webUploaderObj.on('beforeFileQueued', function (file) {
				if(productIdVal){	       
					layer.msg("文件正在上传,上传完毕后再进行上传");	
					return;  	 
				}   
			});
			// 当有文件添加进来的时候
		    webUploaderObj.on( 'fileQueued', function( file , req) {
		    	
		    	
		    });
			// 文件上传前处理请求参数   
			webUploaderObj.on('uploadBeforeSend', function (obj, data) {
				//传入表单参数          	
				data.productId = productIdVal; 
			});     
		    // 文件上传过程中创建进度条实时显示。
		    webUploaderObj.on( 'uploadProgress', function( file, percentage ) {
				
		    });
		    // 文件上传成功
		    webUploaderObj.on( 'uploadSuccess', function( file ,res) {
		    	if(res.code==200){		
					if(res.dataObject){	
						// 显示上传图片								
						$(".image-container .image-card.image-sort"+productIdVal).empty().append('<img class="picture-preview-btn" src="'+res.dataObject.fileUrl+'">');
						// 显示删除							
						var html2 = '<i class="layui-icon layui-icon-delete del-product-image" file-number="'+res.dataObject.number+'" image-sort='+productIdVal+'></i>';
						$(".image-container .image-tools.image-sort1").empty().append(html2);		
						layer.msg("上传成功");						
					}else{		
						layer.msg(res.msg);	
					}
				}else{
					layer.msg(res.msg);
				}	
				webUploaderObj.reset();		        
		    }); 
		 	// 上传失败回调
		    webUploaderObj.on( 'uploadError', function( file ) {
					
		    });
		 	// 不管上传成功还是失败都会执行
		    webUploaderObj.on( 'uploadComplete', function( file ) {
		    			
		    });	
	    }
	    
	 	// 删除图片
	 	$(document).on('click', '.del-product-image', function () {	
	 		var imageSort = $(this).attr("image-sort");
			layer.confirm('确定删除图片吗？', {
				btn: ['确定', '取消']		//按钮
			}, function (index) {
				$.ajax({	    
			        url: '/sysUser/deleteUserPicture',  		// 请求的url地址	
			        dataType: 'json', 					        // 返回格式为json	
			        data: {'productId':imageSort},                             
			        type: 'post', 						        // 请求方式		
			        success: function (res) {
			           if(res.code==200){		
				        	layer.close(index);		
				        	// 显示上传按钮	
							$(".image-container .image-card.image-sort"+imageSort).empty().append('<div id="fileList" class="uploader-list "></div><div class="wb-file-pickers" image-sort='+imageSort+'></div>');
							// 清空删除					
							$(".image-container .image-tools.image-sort"+imageSort).empty().append("");	
							initWebUploader();			
							//webUploaderObj.reset();				
							$(".webuploader-pick").css("padding","initial");
								
			           }else{
			        	   layer.msg(res.msg);	
			           }
			        },
			        error: function () {

			        }	    
			    });
			});
		});
		
	 	// 查询车型列表
	 	function selectCategoryList(bId){
	 		var html = '<option value="">选择或搜索车型</option>';
	 		if(bId>0){
	 			$.ajax({	    
			        url: '/productCategory/selectAllList',  		// 请求的url地址	
			        dataType: 'json', 					        // 返回格式为json	
			        data: {'brandId':bId},                             
			        type: 'post', 						        // 请求方式		
			        success: function (res) {
			        	if(res.code==200){											
			        		brand_list_cache = res.dataObject;
			        		for (let index = 0; index < res.dataObject.length; index++) {
			        			const element = res.dataObject[index];
			        			html+='<option value="'+element.id+'">'+element.categoryName+'</option>';
			        		}			
			        	}else{	
			        		layer.msg(res.msg);	
			        	}
			        	$("#categoryIdSelectQuery").empty().append(html);	
			        	layui.form.render(); 
			        },
			        error: function () {

			        }	    
			    });
	 		}else{
	 			$("#categoryIdSelectQuery").empty().append(html);	
	        	layui.form.render();	 
	        	categoryIdVal = null;
	 		}
	 	}
	 	
	 	/* var player = new Aliplayer({
 		  "id": "player-con",
 		  "source": "http://www.fjbtest.bazhuamiao.com/images/product/maomishipin_2001281651120310.mp4",
 		  "width": "100%",
 		  "height": "500px",
 		  "autoplay": true,
 		  "isLive": false,
 		  "cover": "http://www.fjbtest.bazhuamiao.com/images/product/yz满天星白色_2001281627291964.jpg",
 		  "rePlay": false,
 		  "playsinline": true,
 		  "preload": true,
 		  "language": "zh-cn",
 		  "controlBarVisibility": "hover",
 		  "useH5Prism": true
 		}, function (player) {
 		    console.log("The player is created");
 		  }
 		); */
	</script>
</body>
</html>